<template>
  <div class="list-item flex no-wrap items-center relative-position"
    :class="{'cursor-pointer': !!url, hovered: hovered}"
    @click="itemClicked"
    @mouseenter="hovered = true"
    @mouseleave="hovered = false">
    <div class="avatar" v-if="(img !== void 0 && img !== null) || roundImg">
      <q-img
        class="img"
        :class="{ round: roundImg }"
        width="94px"
        height="75px"
        :src="img | serverImage">
        <template v-slot:error>
          <div class="error absolute-center flex flex-center text-white">
            {{title.substring(0,1)}}
          </div>
        </template>
      </q-img>
    </div>
    <div v-else-if="label" class="item-label flex column justify-center items-center">
      <div class="text-center" style="word-break:break-all;">{{ label }}</div>
    </div>
    <div v-else-if="date" class="item-date flex column justify-center items-center">
      <div class="p">{{ date | dateDay }}</div>
      <div class="year">{{ date | dateYearMonth }}</div>
    </div>
    <div class="item-content flex col column full-height justify-center items-center">
      <div
        v-if="title"
        class="title full-width text-bold"
        :class="{
          hovered: hovered,
          ellipsis: titleLines === 1,
          'ellipsis-2-lines': titleLines === 2,
          'ellipsis-3-lines': titleLines === 3 }">{{ title }}</div>
      <div v-if="content" class="p flex full-wdith full-width justify-between">
        <span class=""
        :class="{
          ellipsis: contentLines === 1,
          'ellipsis-2-lines': contentLines === 2,
          'ellipsis-3-lines': contentLines === 3 }">{{ content }}</span>
        <span v-if="label && date" class="date q-ml-md">{{ date | normalDate }}</span>
      </div>

      <q-space v-if="tagLabels.length"></q-space>

      <div class="tags absolute ellipsis q-pr-md" v-if="tagLabels.length">
        <q-chip
          class="tag"
          :class="`tag-${tag}`"
          v-for="(tag, idx) in tagLabels" :key="idx"
          square size="sm" color="primary" text-color="white">{{tag}}</q-chip>
      </div>
    </div>
    <slot name="after"></slot>
  </div>
</template>

<script>
export default {
  name: 'ListItem',
  props: {
    label: { type: String },
    date: { type: String },
    title: { type: String },
    content: { type: String },
    url: { type: String },
    img: { type: String },
    tags: { type: Array },
    roundImg: { type: Boolean, default: false },
    titleLines: { type: Number, default: 1 },
    contentLines: { type: Number, default: 1 },
  },
  data() {
    return {
      hovered: false,
    };
  },
  computed: {
    tagLabels() {
      return (this.tags || []).filter((vl) => !!vl);
    },
  },
  methods: {
    itemClicked() {
      if (this.$route.params.id && this.url.endsWith(`/${this.$route.params.id}`)) return;

      if (this.url) {
        this.$router.push(this.url);
      }

      this.$emit('clicked');
    },
  },
};
</script>

<style lang="scss" scoped>
.list-item {
  height: 120px;
  padding: 20px 0;
  // padding-top: 16px;
  // padding-bottom: 24px;
  border-bottom: 1px dashed #d8d8d8;
  .avatar {
    .img {
      border-radius: 8px;
    }
    .error {
      width: 94px;
      height: 75px;
      font-size: 24px;
    }

    .round {
      width: 75px !important;
      border-radius: 50%;
      margin: 0 10px;
    }
  }
  .item-date {
    width: 90px;
    height: 71px;
    border-radius: 8px;
    border: solid 2px #265fb3;
    .p {
      font-size: 28px;
      color: #265fb3;
    }
    .year {
      font-size: 15px;
      color: #265fb3;
    }
  }
  .item-label {
    width: 90px;
    height: 71px;
    border-radius: 8px;
    border: solid 2px #265fb3;
    color: #265fb3;
  }
  .item-content {
    margin-left: 16px;
    flex-grow: 1;
    padding-right: 7px;
    .title {
      font-size: 16px;
      color: #2b3a45;
      margin-bottom: 2px;

      &.hovered {
        color: $primary;
      }
    }
    .p {
      font-size: 14px;
      color: #67767f;
      .date {
        font-size: 14px;
        color: #9ba9b5;
      }
    }
  }
  .right {
    font-size: 14px;
    color: #9ba9b5;
  }

  &.hovered {
    background-color: rgba(0,0,0,0.02);
  }

  .tags {
    max-width: calc(100% - 174px);
    bottom: 16px;
    left: 102px;
    // left: 0;

    .tag {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="scss">
.list-item {
  &.tools-list-item,.technology-list-item,.industry-list-item {
    .item-content {
      .title {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
